<template>
	<view class="content">
		<img :src="baseUrl + articleInfo.image" alt="" mode="widthFix" style="width: 100%;" v-if="articleInfo.image">
		<view class="title">
			{{articleInfo.name}}
			<view class="address" v-if="pId==5">
				<img src="/static/images/address1.png" alt=""  mode="widthFix" style="width: 24rpx;margin-right: 8rpx;">
				<text>{{articleInfo.json_ids == '1' ? '地址加密' : articleInfo.address}}</text>
			</view>
		</view>
		

		<view class="detail">
			<view class="detail_centertitle" v-if="pId==5">
				事务所详情介绍
			</view>
			<view class="detail_title" v-else>
				业务详情
			</view>
			<view class="detail_info">
				<rich-text :nodes="articleInfo.content" class="rich_val"></rich-text>
			</view>
			<!-- <view class="detail_img">
				<img :src="baseUrl + articleInfo.image" alt="" mode="widthFix">
			</view> -->
		</view>
		<view class="kefu" @click="toConcatUs">
			<img src="/static/images/kefu.png" alt="" srcset="" mode="widthFix">
		</view>
		<view class="bottom">
			<!-- 和下方是否显示立即预约保持一致 -->
			<view class="left" :class="{'left_full': pId==5 || pId == 6}">
				<view class="item">
					<button open-type="contact" class="contact_btn">
						<img src="/static/images/kefu1.png" alt="">
						客服
					</button>
				</view>
				<view class="item" @click="collect(1)" v-if="articleInfo.collect == '0'">
					<img src="/static/images/collection.png" alt="">
					收藏
				</view>
				<view class="item collected" @click="collect(0)" v-else>
					<img src="/static/images/collection_active.png" alt="">
					已收藏
				</view>
				<view class="item" @click="show= true">
					<img src="/static/images/share.png" alt="">
					分享
					<!-- <button open-type="share" class="contact_btn">
						<img src="/static/images/share.png" alt="">
						分享
					</button> -->
				</view>
			</view>
			<!-- 和上传left_full保持一致 -->
			<view class="" v-if="pId!=5 && pId != 6">
				<button class="right" @click="apply" v-if="articleInfo.apply=='0'">立即预约</button>
				<button class="right applied" v-else>已预约</button>
			</view>
		</view>
		<u-popup :show="show" mode="bottom" @close="show = false">
			<view class="bottom_share">
				<view class="list">
					<button open-type="share" class="contact_btn item">
						<img src="/static/images/wechat.png" alt="">
						微信好友
					</button>
					<view class="item" @click="charClick">
						<img src="/static/images/poster.png" alt="">
						生成海报
					</view>
				</view>
				<button @click="show=false" class="btn_cancel">取消</button>
			</view>
		</u-popup>
		<u-popup :show="showPoster" mode="center" :round="8" @close="close" :safeAreaInsetBottom="false">
			<img :src="path" mode="widthFix" style="width: 95vw;border-radius: 16rpx 16rpx 26rpx 26rpx;"></img>
			<button class="btn-download" @click="downLoad">下载海报</button>
		</u-popup>
		<l-painter ref="painter" hidden></l-painter>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/api/request.js'
	import {
		article,
		collect,
		apply
	} from '@/api/api.js'
	export default {
		data() {
			return {
				id: '',
				pId:'',
				articleInfo: {},
				baseUrl,
				show:false,
				showPoster:false,
				path:''
			};
		},
		onLoad(options) {
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			if(!options){
				options = page.options
			}
			
			this.id = options.id
			this.pId = options.pId
			this.getAttr()
		},
		onShareAppMessage() {
			return {
				title: this.articleInfo.name,
				path: `/pages/product/detail?id=${this.id}&p_id=${this.pid}`,
				imageUrl: baseUrl + this.articleInfo.image
			}
		},
		methods: {
			getAttr(hideLoading) {
				article({
					id: this.id
				},hideLoading).then(res => {
					this.articleInfo = res.data || {}

				})
			},
			collect(type) {
				collect({
					id: this.articleInfo.id,type
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: type == '1'?'收藏成功':'取消收藏成功'
					})
					this.getAttr(true)
				})
			},
			apply() {
				apply({
					id: this.articleInfo.id
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '预约成功'
					})
					this.getAttr(true)
				})
			},
			toConcatUs(){
				uni.navigateTo({
					url:'/pages/index/concatUs'
				})
			},
			close() {
				this.showPoster = false
			},
			charClick(){
				uni.showLoading({
					title: '绘制中'
				});
				let jsonSchema = {
					css: {
						width: "95vw",
						paddingBottom: "40rpx",
						background: "#fff",
						borderRadius: "16rpx",
						overflow:'hidden'
					},
					views:[
						 // 海报头部图片
						{
							src: baseUrl + this.articleInfo.image,
							type: "image",
							css: {
								objectFit: "cover",
								width: "95vw",
								borderRadius: "16rpx",
								background: "#fff",
							}
						},
						// 标题
						{
							type: "view",
							css: {
								boxSizing: "border-box",
								width: "95vw",
								padding: "30rpx 40rpx",
							},
							views: [
								{
									text: this.articleInfo.name,
									type: "text",
									css: {
										fontSize: "32rpx",
										fontFamily: "PingFang SC-Bold, PingFang SC",
										fontWeight: "bold",
										color: "#333333",
										lineHeight: "52rpx",
									}
								},
							],
						},
					]
				}
				if(this.pId == 5) {
					jsonSchema.views[1].views.push(
						// 地址
						{
							type: "view",
							css: {
								boxSizing: "border-box",
								width:'100%'
							},
							views: [
								{
									text: this.articleInfo.json_ids == '1' ? '地址加密' : this.articleInfo.address,
									type: "text",
									css: {
										fontSize: "24rpx",
										fontFamily: "PingFang SC-Bold, PingFang SC",
										fontWeight: "bold",
										color: "#999999",
										lineHeight: "44rpx",
										marginTop:'8rpx'
									}
								},
							],
						},
					)
				}
				
				this.$refs.painter.render(jsonSchema);
				this.$refs.painter.canvasToTempFilePathSync({
				  fileType: "jpg",
				  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
				  pathType: 'url',
				  quality: 1,
				  success: (res) => {
					this.path = res.tempFilePath
					this.show = false
					this.showPoster = true
					uni.hideLoading()
				    console.log(res.tempFilePath);
				  },
				});
			},
			isAuthorize() {
				return new Promise((resolve, reject) => {
					wx.authorize({
						scope: 'scope.writePhotosAlbum'
				    }).then(() => {
						resolve()
				    }).catch(() => {
				        wx.getSetting().then(res => {
							if (!res.authSetting['scope.writePhotosAlbum']) {
								wx.showModal({
									title: '是否授权保存到相册',
									content: '请确认授权，否则无法保存到相册',
									success: res => {
										if (res.confirm) {
											wx.openSetting()
										}
									}
								})
							}
						})
				    })
				})
			},
			downLoad(){
				// 1、授权
				this.isAuthorize().then(() => {
					uni.showLoading({
						title:'下载中...',
						mask: true,
					})
					// 3、保存到相册
					uni.saveImageToPhotosAlbum({//文件保存到本地
						filePath: this.path, //临时路径
						success: function(res) {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '下载成功', //保存路径
								duration: 3000,
							});
						},
						fail(err){
							console.log(err);
							uni.hideLoading()
							uni.showToast({
								title: '下载失败，请稍后重试',
								icon: 'none'
							});
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}
	.content {
		padding-bottom: calc(118rpx + env(safe-area-inset-bottom));
	}
	.title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		width: 100%;
		padding: 32rpx;
		background: #FFFFFF;
	}
	.address {
		margin-top: 8rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 44rpx
	}

	.detail {
		background: #FFFFFF;
		padding: 32rpx;
		margin-top: 18rpx;
		&_centertitle{
			padding:20rpx 0 ;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
			text-align: center;	
			background-image: url('../../static/images/title_bg.png');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 272rpx 26rpx;
		}
		&_title {
			border-left: 8rpx solid #CE3026;
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			line-height: 38rpx;
			padding-left: 8rpx;
		}

		&_info {
			margin-top: 18rpx;
		}
	}
	.rich_val {
		word-break: break-all;
		white-space: pre-line;
	}

	.kefu {
		position: fixed;
		bottom: 300rpx;
		right: 36rpx;
		width: 92rpx;

		img {
			width: 92rpx;
		}
	}
	.contact_btn {
		border: none;
		background-color: transparent !important;
		width: auto;
		overflow: auto;
		padding:0;
		box-shadow: none !important;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height:1.5;
		img {
			width: 40rpx;
			height: 40rpx;
		}
	}
	.contact_btn::after {
		border: none;
		height: auto;
	}
	.bottom_share {
		.list {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 46rpx 0 12rpx 0;
			background-color: #F8F8F8;
			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				margin: 0;
				line-height: 56rpx;
				img {
					width: 108rpx;
					height: 108rpx;
					margin-bottom: 12rpx;
				}
			}
		}
		.btn_cancel {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			background-color: #fff;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn_cancel::after{
			border: none;
		}
	}
	
	.btn-download {
		width: 576rpx;
		height: 98rpx;
		background: #CE3026;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 60rpx;
	}
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		min-height: calc(98rpx + env(safe-area-inset-bottom));
		width: 100vw;
		display: flex;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		z-index: 999;

		.left {
			width: calc(100% - 304rpx);
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;

			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				img {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 6rpx;
				}
			}
			.collected {
				color: #FF720F;
			}
		}
		.left_full {
			width: 100%;
		}

		.right {
			width: 304rpx;
			height: 98rpx;
			background: #CE3026;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.applied {
			background: #999999;
			color: #FFFFFF;
		}
	}
</style>
